<template>
	<view :style="{ paddingTop: `${menuButtonBoundingClientRect.bottom - 68}px`, margin: `0 30rpx` }">
		<view class="head-nav">
			<image src="/static/index/Location.png" style="width: 34rpx;height: 36rpx;" mode="aspectFit"></image>
			<text style="font-size: 32rpx;color: #1A222B;margin: 0 15rpx;">成都</text>
			<image src="/static/index/bottom.png" style="margin-right: 30rpx; width: 17rpx;height: 10rpx;"
				mode="aspectFit"></image>

      <view class="nav">
        <view class="navBar" v-for="(item1, index1) in navList" :key="index1">
          <navigator url="item1.link">
            <view
              :class="{ active: isActive === index1 }"
              @click="checked(index1)"
            >
              <image
                :src="item1.thumb"
                style="width: 26rpx; height: 24rpx"
              ></image>
              <text style="margin-left: 10rpx">{{ item1.navname }}</text>
            </view>
          </navigator>
        </view>
      </view>
      <image
        src="/static/index/share1.png"
        style="width: 30rpx; height: 30rpx"
        mode="aspectFit"
      ></image>
    </view>

		<view style="position: relative;">
			<image src="/static/index/search.png"
				style="width: 24rpx;height: 24rpx;position: absolute;top: 25rpx;left: 20rpx;" mode="aspectFit"></image>
			<input type="text" value="" placeholder-style="font-size:24rpx;color:#9EA9B7;" placeholder="请输入商品名称"
				style="padding-left: 64rpx; width: 630rpx;height: 72rpx;background-color: #F4F4F4;border-radius: 15rpx;" />
		</view>
		<!-- 轮播图1 -->
		<view class="banner-swiper1 screen-swiper square-dot">
			<view style="margin: 20rpx 20rpx 0;">
				<swiper indicator-dots="true" indicator-color="#CBCCCE" indicator-active-color="#fff" :circular="true"
					:autoplay="true" interval="3000" >
					<swiper-item v-for="(item, index) in swipers" :key="index" style="border-radius: 12rpx;">
						<image :src="item" style="width: 710rpx;height: 316rpx;" mode="aspectFill">
						</image>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 轮播图 2-->

		<view class="banner-swiper screen-swiper square-dot">
			<view style="margin: 20rpx 20rpx 0;">
				<swiper :indicator-dots="false" indicator-color="#CBCCCE" indicator-active-color="#00C657"
					:autoplay="false" interval="3000" circular="true">
					<swiper-item>
						<view class="swiper-item">
							<uni-grid :column="5" :showBorder="false">
								<uni-grid-item v-for="(item, index) in swiper1" :key="index" style="margin-top: 27rpx;">
									<navigator :url="`/pages/${item.url}/${item.url}`">
										<view style="display: flex; flex-direction: column; align-items: center;" @tap="goDetail">
											<image :src="`/static/index/${item.icon}`" mode="aspectFit"
												style="width: 78rpx; height: 70rpx;"></image>
											<text
												style="color: #666666;font-size: 22rpx;margin-top: 28rpx;">{{ item.title }}</text>
										</view>
									</navigator>
								</uni-grid-item>
							</uni-grid>
							<uni-grid :column="5" :showBorder="false">
								<uni-grid-item v-for="(item, index) in fl1" :key="index" style="margin-top: 40rpx;">
									<navigator :url="`/pages/index/${item.url}/${item.url}`">
										<view style="display: flex; flex-direction: column; align-items: center;" @tap="goDetail">
											<image :src="`/static/index/${item.icon}`" mode="aspectFit"
												style="width: 50rpx; height: 45rpx;"></image>
											<text
												style="color: #666666;font-size: 22rpx;margin-top: 10rpx;">{{ item.title }}</text>
										</view>
									</navigator>
								</uni-grid-item>
							</uni-grid>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<uni-grid :column="5" :showBorder="false">
								<uni-grid-item v-for="(item, index) in swiper2" :key="index" style="margin-top: 27rpx;">
									<view style="display: flex; flex-direction: column; align-items: center;">
										<image :src="`/static/index/${item.icon}`" mode="aspectFit"
											style="width: 78rpx; height: 70rpx;"></image>
										<text
											style="color: #666666;font-size: 22rpx;margin-top: 28rpx;">{{ item.title }}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
							<uni-grid :column="5" :showBorder="false">
								<uni-grid-item v-for="(item, index) in fl2" :key="index" style="margin-top: 40rpx;">
									<view style="display: flex; flex-direction: column; align-items: center;">
										<image :src="`/static/index/${item.icon}`" mode="aspectFit"
											style="width: 50rpx; height: 45rpx;"></image>
										<text
											style="color: #666666;font-size: 22rpx;margin-top: 10rpx;">{{ item.title }}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view style="margin-top: 78rpx;">
			<uni-grid :column="2" :showBorder="false">
				<uni-grid-item>
						<video style="width: 326rpx;height: 335rpx;border-radius: 10rpx;" @click="goVideo"
						:autoplay="true"								
						id="myVideo"
						src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v">
						</video>
				</uni-grid-item>
				<uni-grid-item>
					<image src="/static/index/share.png" style="width: 346rpx;height: 147rpx;" mode="aspectFill"
						@click="toMakeMoneyPage"></image>
					<image src="/static/index/member.png" style="width: 346rpx;height: 172rpx;margin-top: 16rpx;"
						mode="aspectFill" @click="toMember"></image>
				</uni-grid-item>
			</uni-grid>
		</view>
		<!-- <view>
			<video
			:enable-play-gesture="false"
			:show-fullscreen-btn="false"
			@fullscreenchange="fullscreenchange"
			id="myVideo"
			src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v">
			</video>
		</view> -->
		<view
			style="box-sizing: border-box; margin-top: 29rpx; width: 690rpx;height: 467rpx;border: 5rpx solid #F9F9F9;padding-left: 19rpx;padding-top: 29rpx;border-radius: 20rpx;box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(6, 0, 1, 0.1);">
			<view style="margin-bottom: 35rpx; display: flex;align-items: center;justify-content: space-between;">
				<view style="color: #FF586D;display: flex;align-items: center;">
					<image src="/static/index/miaosha.png" style="margin-right: 10rpx; width: 144rpx;height: 35rpx;"
						mode="aspectFill"></image>
					<uni-countdown :showDay="false" :minute="59" :second="59" backgroundColor="#FF586D;" color="white">
					</uni-countdown>
				</view>
				<view @click="toSeckillPage">
					<text style="font-size: 24rpx;color: #B5B5B5;">进去逛逛</text>
					<image src="/static/index/right.png" style="width: 8rpx;height: 15rpx;padding: 0 20rpx 0 5rpx;"
						mode="aspectFit"></image>
				</view>
			</view>

			<scroll-view scroll-x="true" scroll-left="31rpx" style="display: inline-block;white-space: nowrap;">
				<view style="display: flex;flex-wrap: nowrap;">
					<block v-for="(item2, index2) in productList" :key="index2">
						<view class="product-info">
							<image :src="item2.bigImg"
								style="width: 230rpx;height: 216rpx;border-radius: 10rpx;background-color: #C49E69;"
								mode="aspectFill"></image>
							<text style="font-size: 28rpx;color: #1B1B1B;margin-top: 14rpx;">{{ item2.spuName }}</text>
							<view style="font-size: 20rpx;color: #B4B4B4;margin-top: 9rpx;">
								<text>月售{{ item2.soldNum }}</text>
								<text style="margin-left: 10rpx;">仅剩{{ item2.oneday_limit_count }}份</text>
							</view>
							<view>
								<text style="font-size: 32rpx;color: #F61B00;">￥{{ item2.marketPrice }}</text>
								<text
									style="font-size: 20rpx;color: #B4B4B4;text-decoration: line-through;">￥{{ item2.marketPrice }}</text>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>

		<!-- 品质外卖 -->
		<view>
			<image src="/static/index/waimailogo.png" style="width: 384rpx;height: 36rpx;margin: 50rpx 183rpx 40rpx;"
				mode="aspectFill"></image>
			<view class="horizonal-tab">
				<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
					<block v-for="(item, index) in contentList" :key="item.id">
						<view class="scroll-tab-item" :class="{ active: tabIndex == index }" @tap="toggleTab(index)">
							{{ item.title }}
							<!-- <view class="select"></view> -->
						</view>
					</block>
				</scroll-view>
			</view>
			<!-- 内容区 -->
			<view class="content">
				<!-- 滑块视图 -->
				<scroll-view :scroll-y="true">
					<block v-for="sto in stores" :key="sto">
						<view @click="toPage(sto.id, sto.juli)">
							<view
								style="margin-bottom: 25rpx; display: flex;flex-wrap: nowrap;box-sizing: border-box; width: 690rpx;padding: 20rpx 0 18rpx 20rpx; border: 1rpx solid #B4B4B4;border-radius: 14rpx;">
								<image :src="`https://sxk.scztf.com/Uploads/${sto.logo}`"
									style="background-color: #5D5847; width: 206rpx;height: 206rpx;border-radius: 14rpx;margin-top: 10rpx;"
									mode="aspectFill"></image>
								<view style="margin-left: 18rpx;">
									<text class="title">{{ sto.title }}</text>
									<view
										style="display: flex;align-items: center;margin-top: 10rpx; flex-wrap: nowrap;font-size: 22rpx;color: #FF6F00;">
										<text style="margin-right: 5rpx;">{{ sto.score }}</text>
										<uni-rate v-model="sto.score" :value="5" :size="12" color="#ADC3D0"
											activeColor="#FF6F00"></uni-rate>
										<text
											style="color: #666666;font-size: 22rpx;margin-left: 158rpx;">月售{{ sto.sailed }}</text>
									</view>
									<view style="font-size: 22rpx;color: #666666;margin-top: 5rpx;">
										<text>起送¥{{ sto.send_price }}</text>
										<text
											style="margin: 0 70rpx 21rpx 10rpx;">{{ sto.delivery_price == 0 ? '免配送费' : '配送费' + sto.delivery_price + '元' }}</text>
										<text>{{ sto.delivery_time }}分钟</text>
										<text style="margin-left: 20rpx;">{{ sto.juli / 1000 }}km</text>
									</view>
									<view class="shop-tag">
										<text>新品发布</text>
										<!-- <text style="margin-left: 6rpx;margin-right: 6rpx;" v-if="sto.is_assign*1">支持自取</text> -->
									</view>
									<view class="shop-tag"><text v-if="sto.is_recommend * 1">热卖推荐</text></view>
									<view style="font-size: 20rpx;color: #1B1B1B;margin-top: 12rpx;"
										v-if="score.activity">
										<text
											style="padding: 1rpx 4rpx;border: 1rpx solid #B4B4B4;border-radius: 8rpx;margin-right: 13rpx;">22减10
											48减20</text>
										<text
											style="padding: 1rpx 4rpx;border: 1rpx solid #B4B4B4;border-radius: 8rpx;">新品发布</text>
									</view>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/static/libs/utils.js';
	import {
		Storage
	} from '@/static/libs/utils.js';
	export default {
		data() {
			return {
				menuButtonBoundingClientRect: wx.getMenuButtonBoundingClientRect(),
				isActive: 0,
				value: 5,
				swiper2: [{
						icon: 'sc.png',
						title: '在线商城',
						url: 'mall'
					},
					{
						icon: 'wm.png',
						title: '直播好物',
						url: 'live'
					},
					{
						icon: 'kh.png',
						title: '客户',
						url: ''
					},
					{
						icon: 'zs.png',
						title: '招商',
						url: ''
					},
					{
						icon: 'zp.png',
						title: '招聘',
						url: ''
					}
				],
				swiper1: [{
						icon: 'wm.png',
						title: '品质外卖',
						url: 'waimai'
					},
					{
						icon: 'sq.png',
						title: '社区团购',
						url: 'shequ'
					},
					{
						icon: 'ms.png',
						title: '精选美食',
						url: 'meishi'
					},
					{
						icon: 'zb.png',
						title: '直播好物',
						url: 'live'
					},
					{
						icon: 'sc.png',
						title: '在线商城',
						url: 'mall'
					}
				],
				fl1: [{
						icon: 'dl.png',
						title: '底料',
						url: 'base'
					},
					{
						icon: 'hx.png',
						title: '海鲜',
						url: 'seafood'
					},
					{
						icon: 'scp.png',
						title: '水产品',
						url: 'shuichan'
					},
					{
						icon: 'sg.png',
						title: '水果',
						url: 'fruit'
					},
					{
						icon: 'shuc.png',
						title: '蔬菜',
						url: 'vegetables'
					}
				],
				fl2: [{
						icon: 'sc.png',
						title: '蔬菜'
					},
					{
						icon: 'ly.png',
						title: '粮油'
					},
					{
						icon: 'dp.png',
						title: '冻品'
					},
					{
						icon: 'rl.png',
						title: '肉类'
					},
					{
						icon: 'cj.png',
						title: '厨具'
					}
				],
				swipers: [],
				tabIndex: 0 /* 选中标签栏的序列,默认显示第一个 */ ,
				contentList: ['附近推荐', '猜你喜欢', '超市', '水果', '买菜', '医药'],
				navList: [],
				productList: [],
				stores: [],
				token: '',
				shopId: 0 //品质外卖商家id
			};
		},
		onLoad() {
			this.token = Storage.get('token');
			this.longitude = Storage.get('longitude');
			this.latitude = Storage.get('latitude');
			this.getNavData();
			this.getHotData();
			this.getIndexInfo(); //获取首页信息
			this.getContentList(); //获取商家信息
			this.getCartInfo(); //获取购物车商品信息
		},
		onReady: function (res){
			this.videoContext = uni.createVideoContext('myVideo', this)
			//this.videoContext.requestFullScreen()
			//this.videoContext.exitFullScreen()
		},
		methods: {
			goVideo(){
				uni.navigateTo({
					url:'../video/video'
				})
			},
			video() {
				uni.navigateTo({
					url: '/pages/video/video'
				})
			},
			toPage(id, distance) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}&distance=${distance}`
				});
			},
			toMakeMoneyPage() {
				uni.navigateTo({
					url: "/pages/fenxiao/fenxiao"
				})
			},
			toMember(){
				uni.navigateTo({
					url:"../kaitong/kaitong"
				})
			},
			toggleTab(index) {
				if (index != this.tabIndex) {
					this.tabIndex = index;
					this.shopId = this.contentList[index].id;
					this.getContentList();
				} else {

				}
			},
			tabChange(e) {
				// console.log(e);
				this.tabIndex = e.detail.current;
			},
			checked(index1) {
				this.isActive = index1
			},
			getNavData() {
				this.$request.get(
						"/wxapp.php?from=wxapp&c=entry&a=wxapp&do=user&m=lionfish_comshop&controller=index.get_navigat")
					.then(res => {
						// console.log(res.data)
						this.navList = res.data.data
					});

				// 门店列表
				this.$request.get(
					`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=home&op=index&ta=store&from=wxapp&state=${this.token}&lat=${this.lat}&lng=${this.lng}&condition={"order":"distance","mode":"","dis":""}&page=1&psize=20&cid=0&child_id=0&forceLocation=1&scene=1001`
				).then(res => {
					console.log(res.data.message.message.stores)
					this.stores = res.data.message.message.stores
				});
			},
			//获取秒杀商品列表数据
			getHotData() {
				this.$request
					.get(
						'/wxapp.php?from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop&controller=index.load_spikebuy_goodslist', {
							token: this.token,
							pageNum: 1,
							head_id: 1
						})
					.then(res => {
						// console.log(res.data)
						this.productList = res.data.list;
					});
			},
			//获取首页信息
			getIndexInfo() {
				this.token = Storage.get('token');
				this.$request
					.post(
						`/wxapp.php?from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop&sign=${this.token}&controller=index.index_info`, {
							communityId: 1,
							token: this.token
						})
					.then(res => {
						//console.log('获取首页信息',res)
						//console.log('首页轮播图片',res.data.slider_list[0].image)
						this.contentList = res.data.category_list; //获取品质外卖分类
						this.shopId = this.contentList[this.tabIndex];
						var to_data = [];
						for (var i in res.data.slider_list) {
							to_data[i] = res.data.slider_list[i].image;
						}
						//console.log('成品数据',to_data);
						this.swipers = to_data;
					});
			},
			//获取品质外卖-商家信息
			getContentList() {
				var data = {
					token: this.token,
					lat: this.latitude,
					lng: this.longitude,
					cate_id: this.shopId,
					p: 1
				};
				this.$request.get(
					'/wxapp.php?from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop&controller=index.get_wm_goods',
					data).then(res => {
					// console.log('商铺信息为：',res);
					this.stores = res.data.data;
				});
			},
			//获取外卖购物车数据
			getCartInfo() {
				this.$request
					.get(
						`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=order&op=cart&ta=index&from=wxapp&state=${
						this.token
					}&min=0&forceLocation=1&scene=1001&lat=${this.lat}&lng=${this.lng}&__lat=${this.lat}&__lng=${this.lng}`
					)
					.then(res => {
						// console.log('商铺信息为：',res);
						console.log(res, 'goodsCart');
					});
			}
			
			,toSeckillPage(){
				console.log(123);
				uni.navigateTo({
					url:"/pages/seckill/seckill"
				})
			}
		}
	}
</script>

<style lang="scss">
	.store {
		margin-bottom: 25rpx;
		display: flex;
		flex-wrap: nowrap;
		box-sizing: border-box;
		width: 690rpx;
		padding: 20rpx 0 18rpx 20rpx;
		border: 1rpx solid #b4b4b4;
		border-radius: 14rpx;

		image {
			width: 206rpx;
			height: 206rpx;
			border-radius: 14rpx;
			margin-top: 10rpx;
		}
	}

	//设置轮播的指示点大小
	.banner-swiper {
		/deep/ .uni-swiper-dots {
			// 指示点整个区域
			bottom: 0rpx;
		}

		/deep/ .uni-swiper-dot {
			// 指示点元素默认样式
			width: 40rpx !important;
			height: 6rpx !important;
			border-radius: 2rpx;
		}
	}

	.banner-swiper1 {
		/deep/ .uni-swiper-dots {
			// 指示点整个区域
			bottom: 20rpx;
		}

		/deep/ .uni-swiper-dot {
			// 指示点元素默认样式
			width: 20rpx !important;
			height: 4rpx !important;
			border-radius: 2rpx;
		}
	}

	.select {
		display: none;
		width: 40rpx;
		height: 8rpx;
		background-color: #00c657;
		margin-left: 20rpx;
		border-radius: 4rpx;
	}

	.title {
		width: 388rpx;
		font-size: 30rpx;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.horizonal-tab {
		font-size: 28rpx;
		color: #b4b4b4;
	}

	.horizonal-tab .active {
		color: #1b1b1b;
		font-size: 32rpx;
		border-bottom: 4rpx solid #00c657;
	}

	.scroll-tab {
		white-space: nowrap;
		/* 必要，导航栏才能横向*/
		cursor: pointer;
		height: 140rpx;
		line-height: 100rpx;
		overflow-x: scroll;
	}

	.scroll-tab-item {
		display: inline-block;
		/* 必要，导航栏才能横向*/
		margin: 0 10rpx 49rpx 30rpx;
	}

	.head-nav {
		margin: 83rpx 0 30rpx;
		font-size: 20rpx;
		color: #b1b7c7;
		display: flex;
		align-items: center;
	}

	.nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	.navBar {
		height: 25rpx;
		line-height: 25rpx;
		text-align: center;
		margin-right: 30rpx;
	}

	.product-info {
		display: flex;
		flex-direction: column;
		padding-right: 30rpx;
	}

	.shop-tag {
		display: inline-block;
		margin: 10rpx 5rpx;
		height: 38rpx;
		border: 1rpx solid #b4b4b4;
		border-radius: 8rpx;
		line-height: 38rpx;
		padding: 1rpx 4rpx;
		font-size: 20rpx;
		color: #1b1b1b;
	}
</style>
